<template>
  <div class="task-container">
    <el-form ref="createForm" :model="taskData" :rules="rules">
    <!-- 基本配置 -->
    <div class="data-show">
      <!-- 标题 -->
      <div class="data-actions">
        <h3>选择用户</h3>
      </div>
      <!-- 内容区 -->
      <div class="data-table">
        <!-- 通用布局行 -->
        <div class="common-row row-between">
          <!-- 配置项 - 平台 -->
          <div class="common-item item-3">
            <label class="condition-label">任务选择</label>
            <el-form-item class="condition-input" prop="system">
              <el-select @change="selectTask" v-model="taskId" clearable placeholder="请选择任务">
                <el-option v-for="(item, index) in pageData.data" :key="index" :label="item.name" :value="item.id"></el-option>
                <el-select-loading
                  :hasMore="pageData.hasMore"
                  :page="pageData.page"
                  :loading="pageData.loading"
                  @load-more="pageData.loadingMore"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
    <!-- 任务基本信息 -->
    <div class="data-show">
      <!-- 头部标题 -->
      <div class="data-actions">
        <h3>任务进度信息</h3>
      </div>
      <div class="data-table data-tag-content">
        <!-- 展示 -->
        <div v-if="taskId !== null">
          <!-- 通用布局行 -->
          <div class="common-row row-between">
            <!-- 配置项 - 任务名称 -->
            <div class="common-item item-5">
              <label class="condition-label">任务名称</label>
              <h4 class="condition-input">{{ getContent(taskData.name) }}</h4>
            </div>
            <!-- 配置项 - 任务名称 -->
            <div class="common-item item-5">
              <label class="condition-label">用户</label>
              <h4 class="condition-input">{{ getContent(taskData.infoData.userID) }}</h4>
            </div>
          </div>
          <div class="common-row row-between">
            <div class="common-item item-10">
              <label class="condition-label">任务描述</label>
              <h4 class="condition-input">{{ getContent(taskData.description) }}</h4>
            </div>
          </div>
          <div class="common-row row-between" v-if="taskData.infoData.stegoText">
            <div class="data-show">
              <!-- 标题 -->
              <div class="data-actions data-title-between">
                <h3>隐写文本消息</h3>
              </div>
              <div class="data-table data-table-scroll">
                  <p class="text-container">
                    {{ changeJSON(taskData.infoData.stegoText) }}
                  </p>
                </div>
            </div>
          </div>
          <div class="common-row row-between" v-if="taskData.infoData.signature">
            <div class="data-show">
              <!-- 标题 -->
              <div class="data-actions data-title-between">
                <h3>签名密文</h3>
              </div>
              <div class="data-table data-table-scroll">
                  <p class="text-container">
                    {{ changeJSON(taskData.infoData.signature) }}
                  </p>
                </div>
            </div>
          </div>
          <div class="common-row row-between" v-if="taskData.infoData.messageText">
            <div class="data-show">
              <!-- 标题 -->
              <div class="data-actions data-title-between">
                <h3>秘密信息</h3>
              </div>
              <div class="data-table data-table-scroll">
                  <p class="text-container">
                    {{ taskData.infoData.messageText }}
                  </p>
                </div>
            </div>
          </div>
          <div class="common-row row-between" v-if="taskData.status > 1 && taskData.infoData.verifyResult">
            <div class="data-show">
              <!-- 标题 -->
              <div class="data-actions data-title-between">
                <h3>签名认证结果</h3>
              </div>
              <div class="data-table data-table-scroll">
                  <p class="text-container">
                    {{ taskData.infoData.verifyResult }}
                  </p>
                </div>
            </div>
          </div>
          <div class="common-row row-between" v-if="taskData.status > 2 && taskData.infoData.extractingMessageText">
            <div class="data-show">
              <!-- 标题 -->
              <div class="data-actions data-title-between">
                <h3>提取文本消息</h3>
              </div>
              <div class="data-table data-table-scroll">
                  <p class="text-container">
                    {{ taskData.infoData.extractingMessageText }}
                  </p>
                </div>
            </div>
          </div>
        </div>
        <div v-else class="recommend-empty">
          <i class="iconfont icon-wushuju1 data-empty-icon"></i>
          <h3 class="data-empty">暂无数据</h3>
        </div>
      </div>
    </div>
    <!-- 底部的按钮 -->
    <div class="btn-groups" v-if="taskData.status >= 1">
      <button type="button" :disabled="taskData.status !== 1" class="btn" @click="handleSign">签名认证</button>
      <button type="button" :disabled="taskData.status !== 2" class="btn" @click="handleExtract">消息提取</button>
    </div>
    </el-form>
  </div>
</template>
<script setup>
import useAppStore from '@/stores/app';
import { ref, computed, onActivated } from 'vue';
import { API } from '@/utils/status.js';
import { ElMessage } from 'element-plus';
import * as request from '@/api/steganography';
import ElSelectLoading from '@/components/common/ElSelectLoading.vue';

const systems = API.steganography.systems;
const rules = {};
const types = [
  { value: 0, label: '类型1' },
  { value: 1, label: '类型2' }
];
const defaultTaskData = {
  id: null,
  name: '',
  description: '',
  status: null,
  infoData: {
    messageTextFilePath: null,
    userID: null,
    stegoText: null,
    signature: null,
    messageText: null,
    verifyResult: null,
    extractingMessageText: null
  }
}

// ============> data <============
const appStore = useAppStore();
// 创建任务表单
const createForm = ref(null);
// 任务id
const taskId = ref(null);
// 绑定表单对象
const taskData = ref({
  id: null,
  name: '',
  description: '',
  status: null,
  infoData: {
    messageTextFilePath: null,
    userID: null,
    stegoText: null,
    signature: null,
    messageText: null,
    
    verifyResult: null,
    
    extractingMessageText: null
  }
});
const pageData = ref({
  loading: false,
  hasMore: true,
  name: '',
  status: null,
  // totalCount
  total: 0,
  // pageNo
  page: 1,
  pageSize: 10,
  // totalPage
  pageCount: 5,
  data: [],
  loadingMore(e){
    console.log(e);
    pageData.value.loading = true;
    request.getList({
      pageNo: e,
      pageSize: pageData.value.pageSize,
      moduleType: API.steganography.moduleType.APPFOUR
    })
      .then(res => {
        pageData.value.loading = false;
        if (res.list && Array.isArray(res.list)) {
          const datas = res.list.length > 0 ? res.list : [];
          if (e === 1){
            pageData.value.data = [];
          }
          pageData.value.data.push(...datas);
          pageData.value.hasMore = pageData.value.data.length < res.totalCount;
          pageData.value.page = e;
        }
      })
      .catch(err => {
        console.log(err);
        pageData.value.loading = false;
      })
  }
});
const getContent = computed(() => {
  return function (content){
    return content ? content : '暂未提供';
  }
})
const changeJSON = computed(() => {
  return function (jsonString){
    return jsonString ? window.decodeURIComponent(JSON.parse(jsonString)) : '';
  }
})


// ==========> hooks <==========
// todo 这里要在onActived中初始化整个页面的状态对象，如果创建中会一直无法重置
onActivated(() => {
  pageData.value.hasMore = true;
  pageData.value.page = 1;
  pageData.value.data = [];
  getList();
  taskId.value = null;
  taskData.value = JSON.parse(JSON.stringify(defaultTaskData));
});

// ========> methods <========
function selectTask(e){
  console.log(e);
  console.log(typeof e)
  if (e !== undefined){
    request.getTaskDetailById({id: e})
      .then(res => {
        let result = res;
        result.infoData = JSON.parse(res.infoData);
        console.log(result);
        taskData.value = result;
      })
  } else {
    taskId.value = null;
    taskData.value = JSON.parse(JSON.stringify(defaultTaskData));
  }
}
function getList(){
  request.getList({
    status: pageData.value.status,
    name: pageData.value.name,
    pageNo: pageData.value.page,
    pageSize: pageData.value.pageSize,
    moduleType: API.steganography.moduleType.APPFOUR
  })
    .then(res => {
      console.log(res);
      pageData.value.data = res.list;
      pageData.value.page = res.pageNo;
      pageData.value.total = res.totalCount;
      pageData.value.pageCount = res.totalPage;
      pageData.value.loading = false;
    })
    .catch(err => {
      console.log(err);
      pageData.value.loading = false;
    })
}
function handleSign(){
  appStore.openLoading('签名认证中...');
  request.appFourUserVerify({ id: taskId.value })
    .then(res => {
      console.log(res);
      appStore.closeLoading();
      if (res.status === 2 && res.infoData.verifyResult){
        ElMessage.success('签名认证成功');
        taskData.value.status = res.status;
        taskData.value.infoData.verifyResult = res.infoData.verifyResult;
      } else {
        ElMessage.error('签名认证失败，请稍后重试或联系管理员');
      }
    })
    .catch(err => {
      console.log(err);
      appStore.closeLoading();
    })
}
function handleExtract(){
  appStore.openLoading('消息提取中...');
  request.appFourUserExtract({ id: taskId.value })
    .then(res => {
      console.log(res);
      appStore.closeLoading();
      if (res.status === 3 && res.infoData.extractingMessageText){
        ElMessage.success('消息提取成功');
        taskData.value.status = res.status;
        taskData.value.infoData.extractingMessageText = res.infoData.extractingMessageText;
      } else {
        ElMessage.error('消息提取失败，请稍后重试或联系管理员');
      }
    })
    .catch(err => {
      console.log(err);
      appStore.closeLoading();
    })
}
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/mixin.scss';
.row-between {
  justify-content: space-between;
}
.item-3 {
  width: 30%
}
.item-5 {
  width: 49%;
  // height: auto;
  // padding: 50px 0 60px 0;
}
.item-10 {
  width: 100%;
  height: auto;
  padding: 10px 0;
  .condition-label {
    width: 15%;
  }
  .condition-input {
    width: 80%;
  }
}
.upload {
  width: 100%;
  min-height: 120px;
  height: 120px;
  &::v-deep .el-upload {
    @include wh-100;
    // height: 100%!important;
    .el-upload-dragger {
      @include wh-100;
      border-color: var(--color-main);
      padding: 0;
      .upload-empty {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-gray-10);
        }
        .upload-des {
          color: var(--color-gray-10);
        }
      }
      .upload-content {
        @include wh-100;
        @include flex-all-center;
        flex-direction: column;
        .upload-icon {
          font-size: 30px;
          color: var(--color-main);
        }
        .upload-des {
          color: var(--color-main);
        }
      }
    }
  }
}
.btn-groups {
  margin-top: 20px;
  text-align: center;
  .btn {
    margin: 0 20px;
  }
}
.data-tag-content {
  min-height: 300px;
  overflow-y: auto;
  @include scrollBar;
}
.recommend-empty {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background-color: var(--color-gray-5);
  @include flex-all-center;
  // 无数据提示语
  .data-empty {
    color: var(--color-main-5);
    font-size: 16px;
  }
  // 无数据图标
  .data-empty-icon {
    color: var(--color-main-5);
    font-size: 32px;
  }
}
.data-table-scroll {
  max-height: 220px;
  height: auto;
  overflow-y: auto;
  @include scrollBar;
  .file-image {
    width: 100%;
    height: 190px;
    background-color: var(--color-gray-2);
    border: 1px solid var(--color-main-border);
    border-radius: 6px;
  }
}
</style>